<template>
    <el-dialog
        title="留言内容"
        :visible.sync="dialogVisible"
        width="70%"
        @close="handleClose"
        :before-close="handleClose">
        <div class="innermsg-content-page" id="page" v-loading="loading">
          <el-form ref="ruleForm" 
            :inline="true" 
            label-position="right"
            label-width="100PX" size="small">
            <el-row>
              <el-col :span="24">
                <el-form-item class="layout-item" label="标题">
                  <span>关于XXXX项目报名条件的问题</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item class="layout-item" label="留言类型">
                  <span>实践项目</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item class="layout-item" label="联系人名称">
                  <span>胡志武</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item class="layout-item" label="联系人电话">
                  <span>13244718036</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item class="layout-item" label="描述">
                  <span>这是一段描述的话</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item class="layout-item" label="附件">
                  <span>阿里巴巴开发手册.pdf</span>
                </el-form-item>
              </el-col>

            </el-row>
          </el-form>
          <div>
            <div>
              <span>答复记录</span>
              <span>处理人：</span>
              <span>李先生</span>
            </div>
            <p>
              这是一段回答的内容，内容比较长，停长的
            </p>
            <div>
              <span>答复时间:</span>
              <span>2022-02-02</span>
            </div>
          </div>
          <div class="ask-answer-box" v-for="(item, i) in replyList" :key="i">
            <div class="time">
                <span>回复记录: 2022-02-02 10:10:10</span>
                <span>系统回复</span>
            </div>
            <p class="content">{{remark}}</p>
          </div>
          <el-form ref="ruleForm" 
            :inline="true" 
            label-position="right"
            label-width="100PX" size="small">

              <el-form-item class="layout-item" label="回复">
                <el-input type="textarea"></el-input>
              </el-form-item>
          </el-form>
        </div>
    </el-dialog>
</template>
<script>
// getNewsStudyInfo
import { getNewsStudyInfo } from '@/api/content-manage/researchResult.js';
import { formatDate } from '@/utils/index.js';
import IFrame from "@/components/iFrame/index";
import VideoPlayer from '@/components/videoPlayer'
export default {
  // 组件名称
  name: "ViewNews",
  // 组件参数 接收来自父组件的数据
  props: {},
  components: {
    IFrame,
    VideoPlayer
  },
  // 组件状态值
  data() {
    return {
        dialogVisible: false,
        studyResult: {
            title: '',
            subtitle: '',
            createTimeStr: '',
            detail: '',
            videoUrl: '',
            pdfUrl: ''
        },
        total: 0,
        pageIndex: 0,
        loading: true,
        studentId: null,
        pdfList: [],
        replyList: [{name: 'xxxx'}],
        remark: ''
    };
  },
  created() {
    this.init();
  },
  // 组件方法
  methods: {
    open(id) {
        this.dialogVisible = true;
        this.getNewsStudyInfo(id);
    },
    async getNewsStudyInfo(id) {
      const { code, data } = await getNewsStudyInfo({id});
      this.studyResult = {
        ...data,
        createTimeStr: formatDate(data.createTime)
      };
      if (data.pdfUrl) {
        this.pdfList = data.pdfUrl.split(',');
      }
    },
    async init() {
      setTimeout(() => {
        this.loading = false;
      }, 2000)
      
    //   const { data, code } = await getStudentShow({ pageNo: 1, pageSize: 100 });
    },
    handleClose() {
      this.dialogVisible = false;
    },
    videoPlay() {
      // const videoItem = this.$refs[`video`][0]
      // videoItem &&
        // this.imgVideoList.map((item, inx) => {
        //   if (item.type === 'video') {
        //     this.$refs[`video`][0].pause()
        //   }
        // })
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.innermsg-content-page {
  position: relative;
  width: 1200px;
  margin: 0 auto;

  .ask-answer-box {
    background: #F9F9F9;
    border-radius: 6px;
    border: 1px solid #F0F0F0;
    padding: 25px 20px;

    .time {
        margin-bottom: 15px;
        display: flex;
        justify-content: space-between;
        height: 21px;
        font-size: 15px;
        font-weight: 400;
        color: #9597A0;
    }

    .content {
        font-size: 18px;
        font-weight: 400;
        color: #37383D;
    }
}
    .top-title {
      font-size: 30px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #37383D;
      line-height: 42px;
      margin-bottom: 19px;
      margin-top: 0;
    }
    .top-subtitle {
      font-size: 22px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #666;
      margin: 0;
    }
    .top-tip {
      font-size: 14px;
      font-weight: 400;
      color: #9597a0;
      line-height: 20px;
      margin-bottom: 25px;
    }
    .list {
      display: flex;
      justify-content: space-between;
      margin-bottom: 34px;
      .list-item {
        .item-title {
          font-size: 23px;
          font-weight: 500;
          color: #0c0c0c;
          line-height: 32px;
          margin-bottom: 20px;
        }
        .item-test {
          font-size: 23px;
          font-weight: 400;
          color: #0c0c0c;
          line-height: 32px;
          margin-bottom: 42px;
        }
      }
      .list-img {
        width: 464px;
        height: 298px;
      }
    }
    .video {
      width: 632px;
      height: 365px;
      margin: 30px auto 0;
      position: relative;
      .video-img {
        width: 100%;
        height: 100%;
      }
      .video-btn {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 40%);
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        .btn-img {
          width: 87px;
          height: 87px;
        }
      }
    }
    .bottom-nav {
      margin-top: 80px;
      display: flex;
      justify-content: space-between;
      color: #2F8EFE;
      .el-icon-arrow-left {
        margin-right: 10px;
      }
      .el-icon-arrow-right,
      .el-icon-arrow-down {
        margin-left: 10px;
      }
      .nav-item {
        position: relative;
        font-size: 18px;
        font-weight: 500;
        color: #2F8EFE;
        line-height: 33px;
        cursor: pointer;
        &.disabled {
          color: #999;
          cursor: no-drop;
        }
      }
    }
    .contentRow {
      position: relative;
      word-break: break-all;
      word-wrap: break-word;
      img {
        max-width: 100%;
      }
    }
}
.student-selecte {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  overflow-y: scroll;
  .student-item {
    position: relative;
    display: block;
    width: 100%;
    font-size: 18px;
    padding: 0 20px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #606266;
    height: 34px;
    line-height: 34px;
    box-sizing: border-box;
    cursor: pointer;
  }
  .student-item:hover {
    background-color: #f5f7fa;
  }
}
</style>
